<template>
<!-- appear初始渲染过度 -->
    <transition appear>
        <div class="account">
            <AccountHeader @switchItem="switchItem"></AccountHeader>
            <AccountBottom :switchNum="switchNum"></AccountBottom>
        </div>
    </transition>
</template>

<script>
import AccountHeader from '../components/Account/AccountHeader.vue'
import AccountBottom from '../components/Account/AccountBottom.vue'
import MetaInfo from '../../vue-meta-info'

export default {
    name:"Account",
    metaInfo: MetaInfo.account,
    components:{
        AccountHeader,
        AccountBottom
    },
    data(){
        return{
            switchNum:0
        }
    },
    methods:{
        //子组件调用 - 修改我喜欢的?最近听的
        switchItem(num){
            this.switchNum = num;
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/mixin.scss";
.account{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    @include bg_sub_color();
}
.v-enter,.v-leave-to{
  transform: translateX(100%);
}
.v-enter-to,.v-leave{
  transform: translateX(0%);
}
.v-enter-active,.v-leave-active{
  transition: 0.8s;
}
</style>